<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>

  <div id='app'>
    <div class="container">
      <div class="header" style="max-width: 600px; margin-top:30px">
        <h2>今日事，今日毕</h2>
        <div class="row">
          <div class="col-md-9 col-sm-8 col-xs-12">
            <input type="text" v-model="inputTxt" class="form-control">
          </div>
          <div class="col-md-3 col-sm-4 col-xs-12">
            <button 
              class="btn btn-primary" 
              @click="addTodo">
              增加
            </button>
          </div>
        </div>
      </div>
      <div class="main" style="max-width: 600px; margin-top:30px">
        <ul class="list-group">
          <li 
            class="list-group-item text-center"
            v-if="!todos.length">
            暂无待办事项
          </li>
          <li 
            class="list-group-item clearfix" 
            v-for="(todo, index) in todos"
            :key="index">
            {{todo.content}}
            <div class="pull-right">
              <button 
                @click="delTodo(index)" 
                class="btn btn-danger btn-xs">删除</button>
              <button 
                :disabled="todo.isCompleted" 
                @click="changeTodoState(index)"
                class="btn btn-success btn-xs" 
                >{{todo.isCompleted?'已完成':'点击完成'}}</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script>
  const app = new Vue({
    el: '#app'
    ,data:{
      inputTxt: ''
      ,todos: [
        
      ]
    }
    ,methods: {
      addTodo(){
        // 添加一条事项
        if(this.inputTxt.trim() === ''){
          return false;
        }
        this.todos.push({
          content: this.inputTxt
          ,isCompleted: false
        })
        this.inputTxt = ''
      }
      ,delTodo(index){
        // 删除待办事项
        if(confirm('确定删除吗？')){
          this.todos.splice(index, 1)
        }
      }
      ,changeTodoState(index){
        // 标记已完成
        this.todos[index].isCompleted = true;
      }
    }
  })
</script>
</body>
</html>